<template>
	<div class="hot">
		<h2 class="title">
			正在热映({{hotList.length}}部)
			<i class="iconfont icon-you"></i>
		</h2>
		<ul class="hotList">
			<template v-for="(item,index) in hotList">
				<li class="hotItem" v-if="index<8" :key="item.id" @click="movieDetail(item.id)">
					<div class="movieCover">
						<span v-if="item.r>0" class="score">{{item.r}}</span>
						<img :src="item.img" alt="" />
					</div>
					<p class="movieTitle">{{item.t}}</p>
				</li>
			</template>
		</ul>
		<h2 class="title">
			即将上映({{totalComingMovie}}部)
			<i class="iconfont icon-you"></i>
		</h2>
	</div>
</template>

<script>
	export default {
		name: "hot",
		props: {
			hotList: Array,
			totalComingMovie: Number
		},
		data() {
			return {

			}
		},
		methods: {
			movieDetail(id){
				this.$router.push({
					name: "movieDetail",
					params: {
						id
					}
				})
			}
		},
		mounted() {
			// console.log(this.hotList);
		}
	}
</script>

<style lang="scss" scoped>
	@import '~@/assets/css/common.scss';
	.hot {
		padding: 0 vw(16);
		border-bottom: vw(20) solid #f6f6f6;
		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: vw(22);
			padding: vw(10) 0;
			i {
				color: #999;
			}
		}
		.hotList {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			border-bottom: vw(1) solid #dfdfdf;
			.hotItem {
				width: vw(76);
				.movieCover {
					width: 100%;
					height: vw(113);
					border: vw(1) solid #dfdfdf;
					overflow: hidden;
					position: relative;
					img {
						width: 100%;
						height: 100%;
					}
					span {
						font-size: vw(12);
						position: absolute;
						top: 0;
						right: 0;
						color: #fff;
						background: #659d0e;
						padding: vw(3);
					}
				}
				.movieTitle {
					font-size: vw(14);
					text-align: center;
					line-height: 1.2;
					margin: 1em 0;
					/*1em == vw(14)*/
					height: vw(34);
					overflow: hidden;
				}
			}
		}
		.ad {
			width: 100%;
		}
	}
</style>